<template>
  <view class="u-page">
    <u-list @scrolltolower="scrolltolower">
      <view class="flex_goodslist">
        <u-list-item
          v-for="(item, index) in indexList"
          :key="index"
          @scrolltolower="scrolltolower"
        >
          <view class="goods_every">
            <view class="class_image">
              <image :src="item.imageone" alt="" />
            </view>
            <view class="class_rightdesc">
              <view class="name"> 商品名称：{{ item.goodsname }} </view>
              <view class="price">
                价格：<text>￥{{ item.price }}/个</text>
              </view>
              <view class="goodsnumber"> 库存：{{ item.goodsnumber }} </view>
              <view class="goodsdesc"> 描述：{{ item.goodsdes }} </view>
            </view>
            <view class="add_shopcar">
              <view class="">
                <!-- 加入购物车 -->
              </view>
              <image src="../../static/shopcar.png" mode=""></image>
            </view>
          </view>
        </u-list-item>
      </view>
    </u-list>
  </view>
</template>

<script>
import { getGoodsList } from "../../api/index.js";
export default {
  data() {
    return {
      show: true,
      indexList: [],
      page: 1,
      pageSize: 10,
      total: 0,
    };
  },
  onLoad() {
    this.getGoodsListMessage();
  },
  methods: {
    getGoodsListMessage() {
      getGoodsList({
        page: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        console.log(res);
        if (res.code == 1) {
          this.indexList = [...this.indexList, ...res.data];
          this.total = res.total;
        }
      });
    },
    scrolltolower() {
      if (this.total > this.indexList.length) {
        this.page++;
        this.getGoodsListMessage();
      } else {
        this.$uni.gettitle("没有更多了哦!");
      }
    },
  },
};
</script>
<style lang="scss">
page {
  background-color: #f3f3f3;
  padding-bottom: 40rpx;
  .flex_goodslist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    border-radius: 20rpx;
    .u-list-item {
      background-color: #fff;
      margin-top: 30rpx;
      // padding: 25rpx;
      // box-sizing: border-box;
      width: 45%;
      border-radius: 20rpx;
      .goods_every {
        // display: flex;
        .class_image {
          height: 288rpx;
          width: 100%;
          image {
            width: 100%;
            height: 100%;
            border-radius: 20rpx 20rpx 0 0;
          }
        }
        .class_rightdesc {
          margin-left: 20rpx;
          .name {
            margin-top: 5rpx;
            font-size: 28rpx;
          }
          .price {
            margin-top: 5rpx;
            font-size: 28rpx;
            text {
              color: red;
            }
          }
          .goodsnumber {
            margin-top: 5rpx;
            font-size: 28rpx;
          }
          .goodsdesc {
            margin-top: 5rpx;
            font-size: 28rpx;
            font-weight: 600;
          }
        }
        .add_shopcar {
          display: flex;
          font-size: 28rpx;
          justify-content: space-between;
          padding: 12rpx 30rpx;
          box-sizing: content-box;
          image {
            width: 36rpx;
            height: 36rpx;
          }
        }
      }
    }
  }
}
</style>
